<template>
    <div class="header">
        <div class="logo">后台管理系统</div>
        <div class="user-info">
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    <img class="user-logo" src="../../static/img/timg.jpg">
                    {{username}}
                </span>
                <el-dropdown-menu slot="dropdown">     
                    <el-dropdown-item command="modify_person1">个人设置1</el-dropdown-item>
                    <el-dropdown-item command="modify_person2">个人设置2</el-dropdown-item>  
                    <el-dropdown-item command="modify_person3">个人设置3</el-dropdown-item>                
                    <el-dropdown-item command="login_out" divided>退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
    
</template>
<script>
    import store from '@/vuex/store'
    export default {
        data(){
            return {
                name:"cmd"
            }
        },
        computed:{
            username(){
                let username = localStorage.getItem('ms_username');
                return username ? username : this.name;
            }
        },
        methods: {
        handleCommand(command) {
            this.$message('click on item ' + command);
             if(command == 'login_out'){
                    localStorage.removeItem('ms_username')
                    this.$router.push('/login');
                }
        }
        }
  }
</script>
<style scoped lang='less'>
   .header {
       position: relative;
       box-sizing: border-box;
       width: 100%;
       height: 70px;
       font-size: 22px;
       line-height: 70px;
       color: #fff;
       background-color:#242f42;
       .logo{
            float: left;
            width:250px;
            text-align: center;
        }
        .user-info {
            float: right;
            padding-right: 50px;
            font-size: 16px;
            color: #fff;
            .el-dropdown-link{
                position: relative;
                display: inline-block;
                padding-left: 50px;
                color: #fff;
                cursor: pointer;
                vertical-align: middle;
            }
            .user-logo{
                position: absolute;
                left:0;
                top:15px;
                width:40px;
                height:40px;
                border-radius: 50%;
            }
        }
    }
</style>
